<template>
  <div id="main"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
var option;
option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: ['行业一', '行业二', '行业三', '行业四', '行业五'],
    textStyle: {
      color: "rgba(250, 250, 250, 1)"
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '30%'],
      label: {
        position: 'inner',
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1548, name: '行业一' },
        { value: 679, name: '行业二' },
        { value: 679, name: '行业三' },
        { value: 679, name: '行业四' },
        { value: 679, name: '行业五' }
      ]
    },
    {
      type: 'pie',
      radius: ['45%', '60%'],
      labelLine: {
        length: 0
      },
      label: {
        formatter: '{per|{d}%}',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: [
        { value: 1548, name: '行业一' },
        { value: 679, name: '行业二' },
        { value: 679, name: '行业三' },
        { value: 679, name: '行业四' },
        { value: 679, name: '行业五' }
      ]
    }
  ]
};

onMounted(() => {
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  option && myChart.setOption(option);

});
</script>

<style>
#main{
  width: 100%;
  height: 100%;
}
</style>
